<template>
  <view class="goods-detail">
    <!-- 轮播图 -->
    <view class="swiper-container">
      <swiper 
        class="swiper-wrapper"
        :indicator-dots="true" 
        :autoplay="true" 
        :interval="3000" 
        :duration="500"
        indicator-color="rgba(255,255,255,0.4)"
        indicator-active-color="#ff6b6b">
        <swiper-item v-for="(image, index) in goodsInfo.images" :key="index" class="swiper-item">
          <image :src="image" mode="aspectFit" class="swiper-image"></image>
        </swiper-item>
      </swiper>
      <!-- 图片指示器 -->
      <view class="image-indicator">
        <text>{{ currentImageIndex + 1 }}/{{ goodsInfo.images.length }}</text>
      </view>
    </view>
    
    <!-- 商品信息卡片 -->
    <view class="goods-info-card">
      <view class="price-section">
        <view class="price-info">
          <view class="current-price">¥{{ parseFloat(goodsInfo.price || 0).toFixed(2) }}</view>
          <view class="original-price" v-if="goodsInfo.originalPrice && goodsInfo.originalPrice > goodsInfo.price">
            ¥{{ parseFloat(goodsInfo.originalPrice || 0).toFixed(2) }}
          </view>
          <view class="save-price" v-if="goodsInfo.originalPrice && goodsInfo.originalPrice > goodsInfo.price">
            省¥{{ (goodsInfo.originalPrice - goodsInfo.price).toFixed(2) }}
          </view>
        </view>
      </view>
      
      <view class="goods-title">{{ goodsInfo.name }}</view>
      <view class="goods-subtitle">{{ goodsInfo.desc }}</view>
      
      <view class="goods-stats">
        <view class="stat-item">
          <view class="stat-value">{{ goodsInfo.sales }}</view>
          <view class="stat-label">已售</view>
        </view>
        <view class="stat-divider"></view>
        <view class="stat-item">
          <view class="stat-value">{{ goodsInfo.evaluationCount }}</view>
          <view class="stat-label">评价</view>
        </view>
        <view class="stat-divider"></view>
        <view class="stat-item">
          <view class="stat-value">{{ goodsInfo.averageScore }}</view>
          <view class="stat-label">好评</view>
        </view>
      </view>
    </view>
    
    <!-- 商品规格选择 -->
    <view class="spec-card" @click="showSpecPopup">
      <view class="spec-header">
        <view class="spec-title">
          <uni-icons type="settings" size="18" color="#666"></uni-icons>
          <text>选择规格</text>
        </view>
        <view class="spec-arrow">
          <uni-icons type="right" size="16" color="#ccc"></uni-icons>
        </view>
      </view>
      <view class="selected-spec" :class="{ 'need-select': needSelectSpec }">
        {{ selectedSpec.name || '请选择商品规格' }}
      </view>
    </view>
    
    <!-- 商品详情 -->
    <view class="detail-card">
      <view class="card-header">
        <view class="header-title">
          <uni-icons type="list" size="18" color="#666"></uni-icons>
          <text>商品详情</text>
        </view>
      </view>
      <view class="detail-content" v-html="goodsInfo.detail"></view>
    </view>
    
    <!-- 评价卡片 -->
    <view class="evaluation-card">
      <view class="card-header">
        <view class="header-title">
          <uni-icons type="star" size="18" color="#666"></uni-icons>
          <text>用户评价</text>
        </view>
        <view class="evaluation-summary">
          <text class="score-text">{{ goodsInfo.averageScore }}分</text>
          <text class="count-text">({{ goodsInfo.evaluationCount }}条)</text>
        </view>
      </view>
      
      <!-- 评分分布 -->
      <view class="score-distribution">
        <view class="score-overview">
          <view class="big-score">{{ goodsInfo.averageScore || 5.0 }}</view>
          <view class="score-stars">
            <view class="star" v-for="n in 5" :key="n" 
                  :class="{ 'active': n <= Math.floor(goodsInfo.averageScore) }">★</view>
          </view>
          <view class="score-desc">综合评分</view>
        </view>
        
        <view class="score-bars">
          <view class="bar-item" v-for="(item, index) in scorePercent" :key="index">
            <view class="bar-label">{{ item.label }}</view>
            <view class="progress-bar">
              <view class="progress-fill" :style="{ width: item.percent + '%' }"></view>
            </view>
            <view class="bar-percent">{{ item.percent }}%</view>
          </view>
        </view>
      </view>
      
      <!-- 评价列表 -->
      <view class="evaluation-list">
        <view class="evaluation-item" v-for="(item, index) in evaluations" :key="index">
          <view class="user-header">
            <view class="user-avatar">
              <image :src="item.avatar || '/static/images/default-avatar.png'" mode="aspectFill"></image>
            </view>
            <view class="user-info">
              <view class="user-name">{{ item.nickname || '匿名用户' }}</view>
              <view class="user-stars">
                <view class="star" v-for="n in 5" :key="n" 
                      :class="{ 'active': n <= (item.score || 5) }">★</view>
              </view>
            </view>
            <view class="eval-date">{{ item.createTime }}</view>
          </view>
          
          <view class="eval-content">{{ item.content }}</view>
          
          <view class="eval-images" v-if="item.images && item.images.length > 0">
            <view class="eval-image" v-for="(img, idx) in item.images" :key="idx">
              <image :src="img" mode="aspectFill"></image>
            </view>
          </view>
          
          <view class="eval-spec" v-if="item.spec">规格：{{ item.spec }}</view>
        </view>
      </view>
      
      <view class="view-more-btn" @click="viewAllEvaluations">
        <text>查看全部评价</text>
        <uni-icons type="right" size="14" color="#666"></uni-icons>
      </view>
    </view>
    
    <!-- 底部操作栏 -->
    <view class="bottom-bar">
      <view class="bar-nav">
        <view class="nav-item" @click="goToHome">
          <uni-icons type="home" size="22" color="#666"></uni-icons>
          <text>首页</text>
        </view>
        <view class="nav-item" @click="goToCart">
          <uni-icons type="cart" size="22" color="#666"></uni-icons>
          <text>购物车</text>
          <view class="cart-badge" v-if="cartCount > 0">{{ cartCount > 99 ? '99+' : cartCount }}</view>
        </view>
      </view>
      
      <view class="bar-actions">
        <view class="action-btn secondary" @click="addToCart">
          <uni-icons type="cart" size="18" color="#ff6b6b"></uni-icons>
          <text>加购物车</text>
        </view>
        <view class="action-btn primary" @click="buyNow">
          <text>立即购买</text>
        </view>
      </view>
    </view>
    
    <!-- 规格选择弹窗 -->
    <view class="spec-popup" v-show="showPopup" @click="closePopup">
      <view class="popup-mask"></view>
      <view class="popup-container" @click.stop>
        <!-- 弹窗头部 -->
        <view class="popup-header">
          <view class="popup-product">
            <image :src="goodsInfo.images[0]" mode="aspectFill" class="product-image"></image>
            <view class="product-info">
              <view class="product-price">¥{{ parseFloat(totalPrice || 0).toFixed(2) }}</view>
              <view class="product-original" v-if="totalOriginalPrice > totalPrice">
                ¥{{ parseFloat(totalOriginalPrice || 0).toFixed(2) }}
              </view>
              <view class="product-stock">库存: {{ goodsInfo.stock }}件</view>
              <view class="selected-info" v-if="selectedSpec.name">
                已选: {{ selectedSpec.name }} × {{ quantity }}
              </view>
            </view>
          </view>
          <view class="close-button" @click="closePopup">
            <uni-icons type="close" size="20" color="#999"></uni-icons>
          </view>
        </view>
        
        <!-- 规格选择区域 -->
        <view class="popup-specs" v-if="goodsInfo.specList && goodsInfo.specList.length > 0">
          <view class="popup-section-title">
            选择规格 
            <text class="required-mark" v-if="needSelectSpec">*必选</text>
          </view>
          <view class="spec-options">
            <view
              class="spec-option"
              v-for="(spec, index) in goodsInfo.specList"
              :key="index"
              :class="{ 'selected': spec.id === selectedSpec.id }"
              @click="selectSpec(spec)">
              <view class="spec-name">{{ spec.name }}</view>
              <view class="spec-price">¥{{ parseFloat(spec.retail_price || 0).toFixed(2) }}</view>
            </view>
          </view>
        </view>
        
        <!-- 数量选择区域 -->
        <view class="popup-quantity">
          <view class="popup-section-title">购买数量</view>
          <view class="quantity-selector">
            <view class="quantity-controls">
              <view 
                class="quantity-btn" 
                :class="{ 'disabled': quantity <= 1 }"
                @click="decreaseQuantity">
                <uni-icons type="minus" size="16" color="#666"></uni-icons>
              </view>
              <input 
                class="quantity-display" 
                type="number" 
                v-model="quantity" 
                @blur="checkQuantity"
                @input="onQuantityInput" />
              <view 
                class="quantity-btn" 
                :class="{ 'disabled': quantity >= goodsInfo.stock }"
                @click="increaseQuantity">
                <uni-icons type="plus" size="16" color="#666"></uni-icons>
              </view>
            </view>
            <view class="stock-hint">库存{{ goodsInfo.stock }}件</view>
          </view>
        </view>
        
        <!-- 价格汇总 -->
        <view class="price-summary">
          <view class="summary-section">
            <view class="summary-item">
              <text class="summary-label">单价</text>
              <text class="summary-value">¥{{ parseFloat(currentPrice || 0).toFixed(2) }}</text>
            </view>
            <view class="summary-divider"></view>
            <view class="summary-item">
              <text class="summary-label">小计</text>
              <text class="summary-total">¥{{ parseFloat(totalPrice || 0).toFixed(2) }}</text>
            </view>
          </view>
        </view>
        
        <!-- 底部按钮 -->
        <view class="popup-actions">
          <view class="popup-btn secondary" 
                :class="{ 'disabled': needSelectSpec }"
                @click="addToCartFromPopup">
            加入购物车
          </view>
          <view class="popup-btn primary" 
                :class="{ 'disabled': needSelectSpec }"
                @click="buyNowFromPopup">
            立即购买
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getGoodsDetail, getGoodsComments } from '@/api/goods'
import { addToCart } from '@/api/order/cart'
export default {
  data() {
    return {
      goodsId: '',
      goodsInfo: {
        id: '',
        name: '',
        desc: '',
        price: '0',
        originalPrice: '0',
        sales: 0,
        stock: 0,
        images: [],
        detail: '',
        brand: '',
        category: '',
        specList: [],
        averageScore: 4.8,
        evaluationCount: 0
      },
      evaluations: [],
      selectedSpec: {},
      quantity: 1,
      showPopup: false,
      cartCount: 0,
      basePrice: '0',
      scorePercent: [
        { label: '5星', percent: 70 },
        { label: '4星', percent: 20 },
        { label: '3星', percent: 8 },
        { label: '2星', percent: 2 },
        { label: '1星', percent: 0 }
      ],
      currentImageIndex: 0
    }
  },
  
  computed: {
    totalPrice() {
      const price = this.selectedSpec.retail_price ? 
        parseFloat(this.selectedSpec.retail_price) : 
        parseFloat(this.basePrice) || 0
      const quantity = parseInt(this.quantity) || 1
      return (price * quantity).toFixed(2)
    },
    
    totalOriginalPrice() {
      const originalPrice = this.selectedSpec.market_price ? 
        parseFloat(this.selectedSpec.market_price) : 
        parseFloat(this.goodsInfo.originalPrice) || 0
      const quantity = parseInt(this.quantity) || 1
      return (originalPrice * quantity).toFixed(2)
    },
    
    currentPrice() {
      return this.selectedSpec.retail_price ? 
        parseFloat(this.selectedSpec.retail_price).toFixed(2) : 
        this.basePrice
    },
    
    needSelectSpec() {
      return this.goodsInfo.specList && 
             this.goodsInfo.specList.length > 0 && 
             !this.selectedSpec.id
    }
  },
  
  onLoad(options) {
    this.goodsId = options.id
    this.getGoodsDetail()
    this.getEvaluations()
    this.getCartCount()
  },
  
  // 下拉刷新
  onPullDownRefresh() {
    this.refreshData()
  },
  
  methods: {
    // 刷新数据
    async refreshData() {
      try {
        uni.showLoading({
          title: '刷新中...',
          mask: true
        })
        
        // 重新获取商品详情、评价和购物车数量
        await Promise.all([
          this.getGoodsDetail(),
          this.getEvaluations(),
          this.getCartCount()
        ])
        
        uni.showToast({
          title: '刷新成功',
          icon: 'success',
          duration: 1500
        })
             } catch (error) {
         uni.showToast({
           title: '刷新失败',
           icon: 'none',
           duration: 1500
         })
       } finally {
        uni.hideLoading()
        // 停止下拉刷新动画
        uni.stopPullDownRefresh()
      }
    },
    
    async getGoodsDetail() {
      try {
        const result = await getGoodsDetail(this.goodsId)
        const goods = result.data.goods
        const specs = result.data.specs
        if (result&&goods) {
          this.goodsInfo = {
            id: goods.goods_id || this.goodsId,
            name: goods.goods_name || '商品名称',
            desc: goods.short_name || goods.goods_name || '商品描述',
            brand: goods.brand_name || '',
            category: goods.class_name || '',
            detail: goods.remark || '暂无详细介绍',
            averageScore: 5.0,
            evaluationCount: 0,
            specList: this.processSpecs(specs || []),
            images: this.processImages(specs || [])
          }
          
          if (specs && specs.length > 0) {
            const firstSpec = specs[0]
            this.basePrice = parseFloat(firstSpec.retail_price || '0').toFixed(2)
            this.goodsInfo.price = this.basePrice
            this.goodsInfo.originalPrice = parseFloat(firstSpec.market_price || '0').toFixed(2)
            this.goodsInfo.stock = firstSpec.stock || 999
            this.goodsInfo.sales = Math.floor(Math.random() * 1000 + 10)
          }
          

        }
        
              } catch (error) {
          uni.showToast({
          title: error.message || '获取商品详情失败',
          icon: 'none'
        })
        this.loadFallbackData()
      }
    },
    
    processSpecs(specs) {
      if (!Array.isArray(specs) || specs.length === 0) {
        return []
      }
      
      return specs.map(spec => ({
        id: spec.spec_id,
        name: spec.spec_name || '默认规格',
        retail_price: spec.retail_price || '0',
        market_price: spec.market_price || '0',
        stock: spec.stock || 999,
        image: spec.img_url || '',
        barcode: spec.spec_barcode || ''
      }))
    },
    
    processImages(specs) {
      const images = []
      
      if (Array.isArray(specs)) {
        specs.forEach(spec => {
          if (spec.img_url && spec.img_url.trim() !== '') {
            images.push(spec.img_url)
          }
        })
      }
      
      if (images.length === 0) {
        images.push('https://img0.baidu.com/it/u=3077446461,2580228751&fm=253&fmt=auto&app=120&f=JPEG')
      }
      
      return images
    },
    
    loadFallbackData() {
      this.goodsInfo = {
        id: this.goodsId,
        name: '商品详情加载失败',
        desc: '请检查网络连接后重试',
        price: '0',
        originalPrice: '0',
        sales: 0,
        stock: 0,
        images: ['https://img0.baidu.com/it/u=3077446461,2580228751&fm=253&fmt=auto&app=120&f=JPEG'],
        detail: '商品详情暂时无法加载',
        brand: '',
        category: '',
        specList: [],
        averageScore: 5.0,
        evaluationCount: 0
      }
    },
    
    async getEvaluations() {
      try {
        const result = await getGoodsComments({
          goodsId: this.goodsId,
          page: 1,
          pageSize: 3
        })
        if (result && result.items) {
          this.evaluations = result.items.map(item => ({
            id: item.commentId,
            nickname: item.customerName || '匿名用户',
            avatar: item.customerAvatar || '',
            content: item.replyContent || '用户没有留下评价',
            createTime: item.createTime || '',
            images: item.images || [],
            spec: item.specName || '',
            score: item.rating || 5
          }))
          
          this.goodsInfo.evaluationCount = result.total || this.evaluations.length
        }
      } catch (error) {
        this.evaluations = [
          {
            id: 1,
            nickname: '匿名用户',
            avatar: '',
            content: '商品质量很好，值得推荐！',
            createTime: '2024-01-01',
            images: [],
            spec: '',
            score: 5
          }
        ]
      }
    },
    
    async getCartCount() {
      try {
        const cartList = uni.getStorageSync('cartList') || []
        this.cartCount = cartList.reduce((total, item) => total + item.quantity, 0)
      } catch (error) {
        this.cartCount = 0
      }
    },
    
    showSpecPopup() {
      this.showPopup = true
    },
    
    closePopup() {
      this.showPopup = false
    },
    
    selectSpec(spec) {
      this.selectedSpec = spec
      this.goodsInfo.stock = spec.stock || 999
      
      if (this.quantity > this.goodsInfo.stock) {
        this.quantity = this.goodsInfo.stock
        uni.showToast({
          title: `该规格库存仅剩${this.goodsInfo.stock}件`,
          icon: 'none'
        })
      }
    },
    
    decreaseQuantity() {
      if (this.quantity > 1) {
        this.quantity--
      }
    },
    
    increaseQuantity() {
      if (this.quantity < this.goodsInfo.stock) {
        this.quantity++
      } else {
        uni.showToast({
          title: '已达到最大库存',
          icon: 'none'
        })
      }
    },
    
    async addToCart() {
      if (this.needSelectSpec) {
        uni.showToast({
          title: '请先选择商品规格',
          icon: 'none'
        })
        this.showSpecPopup()
        return
      }
      
      try {
        const cartData = {
          goodsId: this.goodsInfo.id,
          specId: this.selectedSpec.id || 'default',
          quantity: this.quantity,
          name: this.goodsInfo.name,
          price: this.currentPrice,
          image: this.goodsInfo.images && this.goodsInfo.images.length > 0 ? this.goodsInfo.images[0] : '/static/images/default-goods.png',
          spec: this.selectedSpec.name || '默认规格'
        }
        
        await addToCart(cartData)
        
        uni.showToast({
          title: '已添加到购物车',
          icon: 'success'
        })
        
        // 更新购物车数量
        this.getCartCount()
        
      } catch (error) {
        uni.showToast({
          title: error.message || '添加失败',
          icon: 'none'
        })
      }
    },
    
    buyNow() {
      if (this.needSelectSpec) {
        uni.showToast({
          title: '请先选择商品规格',
          icon: 'none'
        })
        this.showSpecPopup()
        return
      }
      
      // 构建单个商品的数据，统一跳转到checkout页面
      const goodsData = [{
        id: this.goodsInfo.id,
        goodsId: this.goodsInfo.id,
        specId: this.selectedSpec.id || 'default',
        name: this.goodsInfo.name,
        specName: this.selectedSpec.name || '默认规格',
        spec: this.selectedSpec.name || '默认规格',
        quantity: this.quantity,
        price: this.currentPrice,
        image: this.goodsInfo.images && this.goodsInfo.images.length > 0 ? this.goodsInfo.images[0] : '/static/images/default-goods.png',
        badge: this.goodsInfo.discount ? '直购' : null
      }]
      
      // 统一跳转到checkout页面
      uni.navigateTo({
        url: `/pages/order/checkout?type=buy&goodsData=${encodeURIComponent(JSON.stringify(goodsData))}`
      })
    },
    
    goToHome() {
      uni.switchTab({
        url: '/pages/index/index'
      })
    },
    
    goToCart() {
      uni.switchTab({
        url: '/pages/cart/index'
      })
    },
    
    viewAllEvaluations() {
      uni.navigateTo({
        url: `/pages/goods/evaluations?id=${this.goodsId}`
      })
    },
    
    onQuantityInput(e) {
      let value = parseInt(e.detail.value) || 1
      if (value < 1) value = 1
      if (value > this.goodsInfo.stock) value = this.goodsInfo.stock
      this.quantity = value
    },
    
    checkQuantity() {
      if (this.quantity < 1) {
        this.quantity = 1
      }
      if (this.quantity > this.goodsInfo.stock) {
        this.quantity = this.goodsInfo.stock
        uni.showToast({
          title: `最多只能购买${this.goodsInfo.stock}件`,
          icon: 'none'
        })
      }
    },
    
    async addToCartFromPopup() {
      await this.addToCart()
      this.closePopup()
    },
    
    buyNowFromPopup() {
      this.closePopup()
      this.buyNow()
    },
    
    // 添加轮播图索引变化监听
    onSwiperChange(e) {
      this.currentImageIndex = e.detail.current
    }
  }
}
</script>

<style scoped>
/* 全局样式优化 */
.goods-detail {
  background: linear-gradient(180deg, #f8f9ff 0%, #f5f6fa 100%);
  min-height: 100vh;
  padding-bottom: 140rpx;
}

/* 轮播图优化 */
.swiper-container {
  width: 100%;
  height: 750rpx;
  background: #fff;
  position: relative;
  border-radius: 0 0 24rpx 24rpx;
  overflow: hidden;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
}

.swiper-wrapper {
  width: 100%;
  height: 100%;
}

.swiper-item {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%);
}

.swiper-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.image-indicator {
  position: absolute;
  bottom: 20rpx;
  right: 20rpx;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  backdrop-filter: blur(10rpx);
}

/* 商品信息卡片 */
.goods-info-card {
  background: #fff;
  margin: 20rpx 16rpx;
  padding: 32rpx;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
}

.price-section {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  flex-wrap: wrap;
}

.price-info {
  display: flex;
  align-items: center;
}

.current-price {
  font-size: 52rpx;
  color: #ff6b6b;
  font-weight: 700;
  margin-right: 16rpx;
}

.original-price {
  font-size: 28rpx;
  color: #999;
  text-decoration: line-through;
  margin-right: 12rpx;
}

.save-price {
  background: linear-gradient(45deg, #ff6b6b, #ff8e8e);
  color: #fff;
  padding: 6rpx 12rpx;
  border-radius: 12rpx;
  font-size: 24rpx;
  font-weight: 500;
}

.goods-title {
  font-size: 36rpx;
  color: #2d3748;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 12rpx;
}

.goods-subtitle {
  font-size: 28rpx;
  color: #718096;
  line-height: 1.5;
  margin-bottom: 24rpx;
}

.goods-stats {
  display: flex;
  align-items: center;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.stat-value {
  font-size: 32rpx;
  color: #2d3748;
  font-weight: 600;
  margin-bottom: 6rpx;
}

.stat-label {
  font-size: 24rpx;
  color: #a0aec0;
}

.stat-divider {
  width: 1rpx;
  height: 40rpx;
  background: #e2e8f0;
  margin: 0 16rpx;
}

/* 规格选择卡片 */
.spec-card {
  background: #fff;
  margin: 0 16rpx 20rpx;
  padding: 24rpx 32rpx;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}

.spec-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12rpx;
}

.spec-title {
  display: flex;
  align-items: center;
  font-size: 30rpx;
  color: #4a5568;
  font-weight: 500;
}

.spec-title text {
  margin-left: 8rpx;
}

.selected-spec {
  font-size: 28rpx;
  color: #718096;
  padding: 12rpx 16rpx;
  background: #f7fafc;
  border-radius: 12rpx;
  border: 2rpx solid transparent;
  transition: all 0.3s ease;
}

.selected-spec.need-select {
  color: #ff6b6b;
  background: rgba(255, 107, 107, 0.1);
  border-color: #ff6b6b;
}

/* 详情卡片 */
.detail-card, .evaluation-card {
  background: #fff;
  margin: 0 16rpx 20rpx;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 32rpx;
  border-bottom: 1rpx solid #f0f4f8;
  background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%);
}

.header-title {
  display: flex;
  align-items: center;
  font-size: 32rpx;
  color: #2d3748;
  font-weight: 600;
}

.header-title text {
  margin-left: 8rpx;
}

.detail-content {
  padding: 32rpx;
  font-size: 28rpx;
  line-height: 1.6;
  color: #4a5568;
}

/* 评价卡片特殊样式 */
.evaluation-summary {
  display: flex;
  align-items: center;
}

.score-text {
  font-size: 28rpx;
  color: #ff6b6b;
  font-weight: 600;
  margin-right: 8rpx;
}

.count-text {
  font-size: 24rpx;
  color: #a0aec0;
}

.score-distribution {
  display: flex;
  padding: 32rpx;
  border-bottom: 1rpx solid #f0f4f8;
}

.score-overview {
  width: 200rpx;
  text-align: center;
  padding-right: 32rpx;
}

.big-score {
  font-size: 72rpx;
  color: #ff6b6b;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 12rpx;
}

.score-stars {
  display: flex;
  justify-content: center;
  margin-bottom: 8rpx;
}

.star {
  font-size: 24rpx;
  color: #e2e8f0;
  margin: 0 2rpx;
}

.star.active {
  color: #ffd700;
}

.score-desc {
  font-size: 24rpx;
  color: #a0aec0;
}

.score-bars {
  flex: 1;
}

.bar-item {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}

.bar-label {
  width: 60rpx;
  font-size: 24rpx;
  color: #718096;
}

.progress-bar {
  flex: 1;
  height: 8rpx;
  background: #f0f4f8;
  border-radius: 4rpx;
  margin: 0 16rpx;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff6b6b, #ff8e8e);
  border-radius: 4rpx;
  transition: width 0.8s ease;
}

.bar-percent {
  width: 60rpx;
  font-size: 24rpx;
  color: #a0aec0;
  text-align: right;
}

/* 评价列表 */
.evaluation-list {
  padding: 0 32rpx;
}

.evaluation-item {
  padding: 24rpx 0;
  border-bottom: 1rpx solid #f0f4f8;
}

.evaluation-item:last-child {
  border-bottom: none;
}

.user-header {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}

.user-avatar {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 16rpx;
}

.user-avatar image {
  width: 100%;
  height: 100%;
}

.user-info {
  flex: 1;
}

.user-name {
  font-size: 28rpx;
  color: #2d3748;
  font-weight: 500;
  margin-bottom: 6rpx;
}

.user-stars {
  display: flex;
}

.user-stars .star {
  font-size: 20rpx;
  margin-right: 4rpx;
}

.eval-date {
  font-size: 24rpx;
  color: #a0aec0;
}

.eval-content {
  font-size: 28rpx;
  color: #4a5568;
  line-height: 1.5;
  margin-bottom: 16rpx;
}

.eval-images {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 12rpx;
}

.eval-image {
  width: 140rpx;
  height: 140rpx;
  margin-right: 12rpx;
  margin-bottom: 12rpx;
  border-radius: 12rpx;
  overflow: hidden;
}

.eval-image image {
  width: 100%;
  height: 100%;
}

.eval-spec {
  font-size: 24rpx;
  color: #a0aec0;
  background: #f7fafc;
  padding: 8rpx 12rpx;
  border-radius: 8rpx;
  display: inline-block;
}

.view-more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24rpx;
  color: #718096;
  font-size: 28rpx;
  border-top: 1rpx solid #f0f4f8;
}

.view-more-btn text {
  margin-right: 8rpx;
}

/* 底部操作栏 */
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  height: 120rpx;
  background: #fff;
  border-top: 1rpx solid #f0f4f8;
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.08);
  z-index: 1000;
}

.bar-nav {
  display: flex;
  width: 200rpx;
}

.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #718096;
  position: relative;
  font-size: 22rpx;
}

.nav-item text {
  margin-top: 6rpx;
}

.cart-badge {
  position: absolute;
  top: 16rpx;
  right: 20rpx;
  background: #ff6b6b;
  color: #fff;
  border-radius: 50%;
  min-width: 32rpx;
  height: 32rpx;
  line-height: 32rpx;
  text-align: center;
  font-size: 20rpx;
  font-weight: 500;
  padding: 0 6rpx;
  border: 2rpx solid #fff;
}

.bar-actions {
  flex: 1;
  display: flex;
  padding: 12rpx;
}

.action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30rpx;
  font-weight: 600;
  border-radius: 16rpx;
  margin-left: 12rpx;
  transition: all 0.3s ease;
}

.action-btn.secondary {
  background: rgba(255, 107, 107, 0.1);
  color: #ff6b6b;
  border: 2rpx solid #ff6b6b;
}

.action-btn.secondary text {
  margin-left: 8rpx;
}

.action-btn.primary {
  background: linear-gradient(135deg, #ff6b6b, #ff5252);
  color: #fff;
  box-shadow: 0 4rpx 15rpx rgba(255, 107, 107, 0.4);
}

.action-btn:active {
  transform: translateY(2rpx);
}

/* 弹窗优化 */
.spec-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2000;
}

.popup-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5rpx);
}

.popup-container {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  border-radius: 32rpx 32rpx 0 0;
  max-height: 85vh;
  overflow-y: auto;
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

.popup-header {
  display: flex;
  padding: 32rpx;
  border-bottom: 1rpx solid #f0f4f8;
  position: relative;
}

.popup-product {
  display: flex;
  flex: 1;
}

.product-image {
  width: 160rpx;
  height: 160rpx;
  border-radius: 16rpx;
  margin-top: -40rpx;
  box-shadow: 0 8rpx 25rpx rgba(0, 0, 0, 0.15);
}

.product-info {
  flex: 1;
  margin-left: 24rpx;
  padding-top: 20rpx;
}

.product-price {
  font-size: 40rpx;
  color: #ff6b6b;
  font-weight: 700;
  margin-bottom: 8rpx;
}

.product-original {
  font-size: 28rpx;
  color: #a0aec0;
  text-decoration: line-through;
  margin-bottom: 12rpx;
}

.product-stock {
  font-size: 24rpx;
  color: #718096;
  margin-bottom: 8rpx;
}

.selected-info {
  font-size: 24rpx;
  color: #ff6b6b;
  background: rgba(255, 107, 107, 0.1);
  padding: 6rpx 12rpx;
  border-radius: 8rpx;
  display: inline-block;
}

.close-button {
  position: absolute;
  top: 32rpx;
  right: 32rpx;
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f7fafc;
}

.popup-specs, .popup-quantity {
  padding: 32rpx;
  border-bottom: 1rpx solid #f0f4f8;
}

.popup-section-title {
  font-size: 30rpx;
  color: #2d3748;
  font-weight: 600;
  margin-bottom: 20rpx;
}

.required-mark {
  color: #ff6b6b;
  font-size: 24rpx;
  margin-left: 8rpx;
}

.spec-options {
  display: flex;
  flex-wrap: wrap;
}

.spec-option {
  background: #f7fafc;
  border: 2rpx solid #e2e8f0;
  border-radius: 16rpx;
  padding: 20rpx;
  margin-right: 16rpx;
  margin-bottom: 16rpx;
  min-width: 140rpx;
  text-align: center;
  transition: all 0.3s ease;
}

.spec-option.selected {
  background: rgba(255, 107, 107, 0.1);
  border-color: #ff6b6b;
  color: #ff6b6b;
}

.spec-name {
  font-size: 28rpx;
  color: #2d3748;
  margin-bottom: 8rpx;
  font-weight: 500;
}

.spec-option.selected .spec-name {
  color: #ff6b6b;
}

.spec-price {
  font-size: 24rpx;
  color: #ff6b6b;
  font-weight: 600;
}

.quantity-selector {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.quantity-controls {
  display: flex;
  align-items: center;
  background: #f7fafc;
  border-radius: 16rpx;
  padding: 8rpx;
}

.quantity-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.quantity-btn.disabled {
  background: #f0f4f8;
  box-shadow: none;
}

.quantity-display {
  width: 100rpx;
  height: 60rpx;
  text-align: center;
  font-size: 32rpx;
  color: #2d3748;
  font-weight: 600;
  background: transparent;
  border: none;
  margin: 0 16rpx;
}

.stock-hint {
  font-size: 24rpx;
  color: #a0aec0;
}

.price-summary {
  padding: 24rpx 32rpx;
  background: #f8f9ff;
  border-bottom: 1rpx solid #f0f4f8;
}

.summary-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12rpx;
  font-size: 28rpx;
}

.summary-divider {
  width: 1rpx;
  height: 40rpx;
  background: #e2e8f0;
  margin: 0 16rpx;
}

.summary-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.summary-label {
  color: #718096;
}

.summary-value {
  color: #2d3748;
}

.summary-total {
  color: #ff6b6b;
  font-size: 32rpx;
  font-weight: 700;
}

.popup-actions {
  display: flex;
  padding: 24rpx 32rpx 32rpx;
}

.popup-btn {
  flex: 1;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30rpx;
  font-weight: 600;
  border-radius: 16rpx;
  margin-left: 16rpx;
  transition: all 0.3s ease;
}

.popup-btn:first-child {
  margin-left: 0;
}

.popup-btn.secondary {
  background: rgba(255, 107, 107, 0.1);
  color: #ff6b6b;
  border: 2rpx solid #ff6b6b;
}

.popup-btn.primary {
  background: linear-gradient(135deg, #ff6b6b, #ff5252);
  color: #fff;
  box-shadow: 0 4rpx 15rpx rgba(255, 107, 107, 0.4);
}

.popup-btn.disabled {
  background: #f0f4f8 !important;
  color: #a0aec0 !important;
  border-color: #e2e8f0 !important;
  box-shadow: none !important;
  pointer-events: none;
}

.popup-btn:active {
  transform: translateY(2rpx);
}

/* 响应式优化 */
@media (max-width: 750rpx) {
  .goods-stats {
    flex-wrap: wrap;
  }
  
  .stat-item {
    flex-basis: 33.33%;
    margin-bottom: 16rpx;
  }
  
  .stat-divider {
    display: none;
  }
}
</style>    